<!-- dubbo测试页面 -->
<#include "../layout/layout.ftl"/>
<@body>
    <script src="/script/tool/dubbo.js"></script>
    <link href="/lib/jsoneditor/css/jsoneditor.min.css" rel="stylesheet"/>
    <script src="/lib/jsoneditor/js/jsoneditor.min.js"></script>
   <script src="/script/tool/expressionUtil.js"></script>
   <script src="/script/testcase/testcase.js"></script>

    <div class="container-fluid">
            <div class="panel panel-default" style="padding-bottom: 20px">
                <div class="panel-heading">基础用例信息</div>
                <div class="row">
                    <label class="col-md-1">用例名称:</label>
                    <div class="col-md-3">
                        <input type="text" class="form-control" id="testCaseName" name="testCaseName"
                       <#if testCase??>value="${testCase.testCaseName!}</#if> ">
                    </div>
                    <label class="col-md-1">用例级别:</label>
                    <div class="col-md-2">
                        <select class="form-control" id="level" name="level">
                            <option value="1"<#if testCase?? && testCase.level ?? && testCase.level =1>selected</#if>>1</option>
                            <option value="2"<#if testCase?? && testCase.level ?? && testCase.level =2>selected</#if> >2</option>
                            <option value="3"<#if testCase?? && testCase.level ?? && testCase.level =3>selected</#if> >3</option>
                            <option value="4"<#if testCase?? && testCase.level ?? && testCase.level =4>selected</#if> >4</option>
                        </select>
                    </div>
                </div>
                <div class="row">
                    <label class="col-md-1">断言类型:</label>
                    <div class="col-md-2">
                        <select class="form-control" id="assertType" name="assertType" onchange="switchExpression(this.value)">
                            <option value="1"<#if testCase?? && testCase.assertType ?? && testCase.assertType =1>selected</#if>>全文匹配</option>
                            <option value="2"<#if testCase?? && testCase.assertType ?? && testCase.assertType =2>selected</#if> >实际结果包含预期结果</option>
                            <option value="3"<#if testCase?? && testCase.assertType ?? && testCase.assertType =3>selected</#if>>实际结果不包含预期结果</option>
                            <option value="4"<#if testCase?? && testCase.assertType ?? && testCase.assertType =4>selected</#if> >jsonPath</option>
                            <option value="5"<#if testCase?? && testCase.assertType ?? && testCase.assertType =5>selected</#if>>正则</option>
                        </select>
                    </div>
                    <div class="col-md-5">
                        <input type="hidden" id="id" <#if testCase??>value="${testCase.id!}</#if> ">
                        <input type="hidden" id="interfaceId" name="interfaceId" value="${interfaceId!}">
                        <input type="hidden" id="interfaceType" name="interfaceType" value="dubbo">
                        <input type="button" class="btn btn-primary" onclick="invokeForTestCase()"
                               value="调用一次">
                        <input type="button" class="btn btn-primary" onclick="submitForm()"
                               value="保存">
                        <input type="button" class="btn btn-primary"  onclick="resolveIP()"
                               value="保存并且新增下一条">
                        <input type="button" class="btn btn-primary"  id="addExpression"
                               value="增加断言表达式">
                        <input type="button" class="btn btn-primary" id="testExpression"  onclick="check()" value="测试表达式">
                    </div>
                </div>
            </div>
            <div class="panel panel-default" id="expressionPanel" >
                <#--<div class="panel-heading">表达式</div>-->
                <div class="row">
                    <table id="expressionTable">

                    </table>
                </div>
            </div>
            <div class="panel panel-default"
                 style="height: 564px; float: left;width: 49.5%;margin-right: 0.5%">
                <div class="panel-heading">
                    <span style="text-align: left">入参</span>
                </div>
                <div class="row form-group-lg" style="margin: 0 0 0 0">
                    <div type="text" class="form-control"
                         style="height: 522px; border: 0px">
                    <#--<textarea class="form-control" style="height: 100%;border: 0px" id="param"></textarea>-->
                        <div id="param">

                        </div>
                    </div>
                </div>
            </div>
            <div class="panel panel-default"
                 style="padding-bottom: 20px; height: 564px; float: left;width: 49.5%;margin-left: 0.5%">
                <div class="panel-heading">
                    <span style="text-align: left">预期结果</span>
                    <span style="text-align: right;color: green;padding-left: 10px" id="success"></span>
                    <span style="text-align: right;color: red;padding-left: 10px" id="error"></span>
                </div>
                <div class="row form-group-lg" style="margin: 0 0 0 0">
                    <div type="text" class="form-control"
                         style="height: 522px; border: 0px" id="result">
                        <div id="result"></div>
                    <#--<textarea class="form-control" style="height: 100%;border: 0px" id="result"></textarea>-->
                    </div>
                </div>
            </div>
    </div>
    <style>
        .row {
            margin-top: 10px;
            margin-left: 10px;
        }
    </style>
    <script>
        var paramEditor;
        var resultEditor;
        var expressionValue;
        $(function () {
            expressionValue =new ExpressionValueUtil();
            expressionValue.init($("#expressionTable"),$("#addExpression"),150);
            //json的配置文件，主要是确定使用的格式
            var jsonOptions = {
                mode: "tree", modes: ["code", "tree", "text"],
                onError: function (err) {
                    alert(err.toString());
                }
            };
            var container = document.getElementById("param");
            paramEditor = new JSONEditor(container, jsonOptions);
            var result = document.getElementById("result");
            resultEditor = new JSONEditor(result, jsonOptions,);
            <#if testCase?? && testCase.param??>
            <#--var paramModelStr ='${paramModel}';-->
            <#--var paramModelObj =JSON.parse(paramModelStr);-->
                paramEditor.set(${testCase.param});
            </#if>
             <#if testCase?? && testCase.expectResult??>
             <#--var paramModelStr ='${paramModel}';-->
             <#--var paramModelObj =JSON.parse(paramModelStr);-->
                resultEditor.set(${testCase.expectResult});
             </#if>
            // var obj ={"name":"xiaoli"};
            // jsonEditor.set(obj)
            <#if testCase?? && testCase.assertType?? && testCase.assertType !=1>
            //因为修改的情况下，assertType的值已经入库了，可能是1、2、3、4、5
            //只是从数据库里面取assertType的值调用switchExpression方法
                switchExpression(${testCase.assertType});
                expressionValue.loadData('${testCase.expression!}');
            <#else >
                /**新增页面默认是全文匹配,给一个默认值1**/
                switchExpression(1) ;
            </#if>
        })

        function submitForm() {
            var url ="/testCase/saveTestCase";
            var interfaceId =$("#interfaceId").val();
            var interfaceType=$("#interfaceType").val();
            var param =JSON.stringify(paramEditor.get());
            var expectResult =JSON.stringify(resultEditor.get());
            var assertType =$("#assertType").val();
            var testCaseName =$("#testCaseName").val();
            var expressionData =$("#expressionTable").bootstrapTable("getData");
            var expression =JSON.stringify(expressionData);
            var id=$("#id").val();
            var level =$("#level").val();
            $.ajax({
                url:url,
                method:"post",
                data:{
                    testCaseName:testCaseName,
                    assertType:assertType,
                    param:param,
                    expectResult:expectResult,
                    expression:expression,
                    id:id,
                    level:level
                },success:function (result) {
                    if(result.success){
                        window.location.href="/testCase/page?id="+interfaceId+"&interfaceType="+interfaceType
                    }else {
                        Ewin.alert(result.msg)
                    }
                }
            })
        }

    </script>
</@body>